<template>
  <div class="emp-container">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <el-form inline label-width="80px" size="small">
          <el-form-item label="姓名">
            <el-input placeholder="请输入员工姓名" v-model="pageParams.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="pageParams.gender">
              <el-option :value="1" label="男"></el-option>
              <el-option :value="2" label="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入职日期">
            <el-date-picker v-model="date" value-format="yyyy-MM-DD" format="yyyy-MM-DD" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询员工</el-button>
            <el-button type="primary" icon="el-icon-delete" @click="handleClear">清空结果</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button type="primary" size="small " icon="el-icon-plus" @click="handleAdd">添加员工</el-button>
        <el-button type="danger" size="small " icon="el-icon-delete" @click="deleteEmpAll">批量删除</el-button>
      </div>
      <el-table border stripe :data="empList" @selection-change="selectionChange">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center" width="150"></el-table-column>
        <el-table-column label="头像" width="80">
          <template #default="{row}">
            <el-avatar :size="50" :src="row.image">
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" align="center" width="120"></el-table-column>
        <el-table-column label="性别" align="center">
          <template #default="{row}">
            {{ row.gender === 1 ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column label="职务" align="center">
          <template #default="{row}">
            {{ formatJob(row.job) }}
          </template>
        </el-table-column>
        <el-table-column prop="entrydate" label="入职日期" align="center" width="130"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(row.id)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParams.page" :page-sizes="[5, 10, 15, 20]" :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background></el-pagination>
    </el-card>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="45%">
      <el-form size="small" label-width="100px" :model="empInfo">
        <el-form-item label="用户名">
          <el-input placeholder="请输入用户名" v-model="empInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input placeholder="请输入姓名" v-model="empInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="empInfo.gender">
            <el-option :value="1" label="男"></el-option>
            <el-option :value="2" label="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像"></el-form-item>
        <el-form-item label="职务">
          <el-select v-model="empInfo.job">
            <el-option v-for="(item) in jobList" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职日期">
          <el-date-picker v-model="empInfo.entrydate" type="date" placeholder="选择日期" value-format="yyyy-MM-DD" format="yyyy-MM-DD"></el-date-picker>
        </el-form-item>
        <el-form-item label="归属部门">
          <el-select v-model="empInfo.deptId">
            <el-option v-for="(item) in deptList" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" @click="dialogVisible=false">取消</el-button>
        <el-button size="small" type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { jobList,MAPJOB } from '@/const'

export default {
  data() {
    return {
      jobList,
      date: [],
      pageParams:
        {
          page: 1,
          pageSize: 5,
          name: undefined,
          gender: undefined,
          begin: undefined,
          end: undefined
        },
      empInfo: {
        name: '',
        username: '',
        gender: '',
        image: '',
        job: '',
        entrydate: '',
        deptId: ''
      },
      selectIds: [],
      dialogVisible: false,
      edit: false
    }
  },
  methods: {
    formatJob(value) {
      return MAPJOB[value]
    },
    async fetchEmp() {
      await this.$store.dispatch('empStore/fetchEmpAction', this.pageParams)
    },
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.fetchEmp()
    },
    handleCurrentChange(page) {
      this.pageParams.page = page
      this.fetchEmp()
    },
    handleSearch() {
      const [begin, end] = this.date
      this.pageParams.begin = begin
      this.pageParams.end = end
      this.fetchEmp(this.pageParams)
    },
    handleClear() {
      this.pageParams.page = 1
      this.pageParams.pageSize = 5
      this.pageParams.gender = undefined
      this.pageParams.begin = undefined
      this.pageParams.end = undefined
      this.pageParams.name = undefined
      this.fetchEmp()
    },
    async handleDelete(row) {
      const confirm = await this.$confirm(`此操作将永久删除${row.name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)
      if (confirm === 'cancel') return
      try {
        const deleteResult = await this.$store.dispatch('empStore/deleteEmpAction', row.id)
        await this.fetchEmp()
        this.$message.success(deleteResult)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    selectionChange(selectIds) {
      this.selectIds = selectIds.map(item => item.id)
    },
    async deleteEmpAll() {
      if (this.selectIds.length === 0) return this.$message.warning('请选择需要删除的项目')
      try {
        const deleteResult = await this.$store.dispatch('empStore/deleteEmpAction', this.selectIds)
        await this.fetchEmp()
        this.$message.success(deleteResult)
      } catch (error) {
        this.$message.error(error.message)
      }
    },

    handleAdd() {
      this.edit = false
      this.dialogVisible = true
    },

    async handleEdit(id) {
      this.edit = true
      this.dialogVisible = true
      const empInfo = await this.$store.dispatch('empStore/fetchEmpDetailAction', id)
      this.empInfo = empInfo
    },

    async handleSubmit() {
      if (this.edit) {
        try {
          const editResult = await this.$store.dispatch('empStore/editEmpAction', this.empInfo)
          this.dialogVisible = false
          this.fetchEmp()
          this.$message.success(editResult)
        } catch (error) {
          this.$message.error(error.message)
        }
      } else {
        try {
          const addResult = await this.$store.dispatch('empStore/addEmpAction', this.empInfo)
          this.dialogVisible = false
          this.fetchEmp()
          this.$message.success(addResult)
        } catch (error) {
          this.$message.error(error.message)
        }
      }
    }

  },
  computed: {
    title() {
      return this.edit ? '编辑员工' : '添加员工'
    },
    ...mapState('empStore', ['empList', 'total']),
    ...mapState('deptStore', ['deptList'])
  },
  mounted() {
    this.fetchEmp()
    this.$store.dispatch('deptStore/fetchDeptAction')
  }
}
</script>

<style scoped>
.emp-container {
  padding: 15px;

  .el-table {
    margin: 10px 0;
  }

  .el-pagination {
    display: flex;
    justify-content: center;
  }

  .el-dialog__body {
    display: flex;
    justify-content: center;
    align-items: center;

    .el-form {
      width: 80%;
    }
  }

  .cell {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-select {
    width: 100%;
  }

  .el-date-editor {
    width: 100%;
  }

}
</style>

